<script setup lang="ts" name="SystemUser">
import { Plus, Search, Delete, Key, Edit, Refresh } from "@element-plus/icons-vue"
import { getPageList, deleteById } from '@/api/system/user'
import { useTablePage } from '@/hooks/useTablePage'

/**
 * 表格参数
 */
const {
  tableListRef,
  queryFormRef,
  editRef,
  loading, pageTypes, query, tableList,
  queryData,
  handleQuery,
  resetForm,
  handleDelete,
  handleEdit,
  handleAdd,
} = useTablePage<SysUserType, SysUserQuery>({ getPageList, deleteById })

/**
 * 重置密码
 */
const passwordRef = ref();
function handlePwd(row: SysUserType) {
  passwordRef.value.open(row);
}

/**
 * 测试：自定义的权限控制方法
 */
// function handleAddBefore() {
//   if (!auth('system:user:add')) {
//     return msg('没有新增权限');
//   }
//   msg('有新增权限', { type: 'success' });
//   handleAdd();
// }
</script>

<template>
  <div class="page-nav">
    <div class="tab-header">
      <div class="tab-header-search">
        <el-form inline :model="query" ref="queryFormRef">
          <el-form-item label="用户账号" prop="keyword">
            <el-input v-model="query.keyword" placeholder="请输入账号" style="width: 200px" clearable />
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button type="primary" plain :icon="Search" @click="handleQuery()">搜 索</el-button>
            <el-button type="primary" plain :icon="Refresh" @click="resetForm(queryFormRef)">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tab-header-btn">
        <el-button type="primary" plain :icon="Plus" @click="handleAdd()">新增用户</el-button>
      </div>
    </div>

    <div class="tab-page-container">
      <el-table class="table-con" ref="tableListRef" v-loading="loading" :data="tableList" border stripe
        :header-cell-style="{ backgroundColor: '#f7f7f7' }">
        <el-table-column fixed="left" align="center" prop="nickName" label="用户昵称" width="120" />
        <el-table-column align="center" prop="username" label="用户帐号" width="160" />
        <el-table-column align="center" prop="mobile" label="手机号" width="160" />
        <el-table-column align="center" prop="email" label="邮箱" />
        <el-table-column align="center" label="帐号锁定" width="120">
          <template #default="{ row }">
            <el-tag :type="row.accountNonLocked ? 'success' : 'danger'" effect="dark">
              {{ row.accountNonLocked ? '正常' : '锁定' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="帐号过期" width="120">
          <template #default="{ row }">
            <el-tag :type="row.accountNonExpired ? 'success' : 'danger'" effect="dark">
              {{ row.accountNonExpired ? '正常' : '过期' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="密码过期" width="120">
          <template #default="{ row }">
            <el-tag :type="row.credentialsNonExpired ? 'success' : 'danger'" effect="dark">
              {{ row.credentialsNonExpired ? '正常' : '过期' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" sortable prop="createTime" label="创建时间" width="200" />
        <el-table-column fixed="right" align="center" label="操作" width="260">
          <template #default="{ row }">
            <el-button @click.stop="handlePwd(row)" :icon="Key" type="primary" link>密码重置</el-button>
            <el-button @click.stop="handleEdit(row)" :icon="Edit" type="warning" link>修改</el-button>
            <el-popconfirm @confirm="handleDelete(row.id)" width="auto" :title="`确定永久删除【${row.nickName}】吗？`">
              <template #reference>
                <el-button :icon="Delete" type="danger" link>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <pagination :page="pageTypes" @pageChange="queryData"></pagination>

    <!-- 新增/修改组件 -->
    <UserEdit ref="editRef" @refresh="queryData" />

    <!-- 重置密码组件 -->
    <Password ref="passwordRef" />
  </div>
</template>

<style scoped lang="scss">
.tab-header-search {
  :deep(.el-form-item) {
    margin-bottom: 0px !important;
  }
}
</style>